function setPic(arr) {
  let myChart = echarts.init(document.querySelector('.pie'));
  let option = {
    title: {
      text: '籍贯Hometown',
      textstyle: {},
      color: '6d767e'
    },
    tooltip: {
      formatter: '{a}<br>{b}<b>{c}</b>人 占比{d}%'
    },
    series: [{
      name: '各地人员分布',
      type: 'pie',
      radius: ['10%', '65%'],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: arr
    }]
  };
  myChart.setOption(option);
}


function setLine(obj) {
  let myChart = echarts.init(document.querySelector('.line'));

  // 设置好参数
  let option = {
    color: ['red', 'blue'],
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    title: {
      // left: 'center',
      text: '薪资Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: obj.name
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '50%'],
      min: 0,
      max: 30000,
    },
    dataZoom: [{
      type: 'slider',
      start: 0,
      end: 40,

    }, ],
    legend: {
      top: 20
    },
    series: [{
      name: '期望薪资',
      type: 'line',
      symbol: 'none',
      sampling: 'lttb',
      showSymbol: false,
      smooth: true,
      color: 'blue',

      data: obj.salary
    }, {
      name: '实际薪资',
      type: 'line',
      symbol: 'none',
      sampling: 'lttb',
      smooth: true,
      data: obj.truesalary
    }]
  };
  myChart.setOption(option);
}


function setBar(sb) {
  let myChart = echarts.init(document.querySelector('.barChart'));
  let option;
  option = {
    grid: {
      top: 30,
      bottom: 30,
      left: '7%',
      right: '7%'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },


    legend: {
      data: ['平均分', '低于60分人数', '60到80分之间', '高于80分的人']
    },
    xAxis: [{
      type: 'category',
      data: sb.group,
      axisPointer: {
        type: 'shadow'
      }
    }],
    yAxis: [{
        type: 'value',
        name: '成绩Score',
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: '{value} 分'
        }
      },
      {
        type: 'value',
        name: '',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value}人 '
        }
      }
    ],
    series: [{
        name: '平均分',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 分';
          }
        },
        data: sb.avgScore
      },
      {
        name: '低于60分人数',
        type: 'bar',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 分';
          }
        },
        data: sb.lt60
      },
      {
        name: '60到80分之间',
        type: 'bar',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 分';
          }
        },
        data: sb.gt60
      },
      {
        name: '高于80分的人',
        type: 'bar',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 分';
          }
        },
        data: sb.gt80
      }
    ]
  };
  myChart.setOption(option);
}

function setMap(a, b) {
  let myChart = echarts.init(document.querySelector('.map'));
  var chinaGeoCoordMap = a;
  var chinaDatas = b;
  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  var series = [];
  [
    ['顺义校区', chinaDatas]
  ].forEach(function (item, i) {
    series.push({
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0.2 //尾迹线条曲直度
          }
        },
        data: convertData(item[1])
      }, {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: { //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) { //圆环显示文字
              return params.data.name;
            },
            fontSize: 12
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 4 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: '#f00'
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
          };
        }),
      },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            offset: [5, 0],
            color: '#9eca7f', // 目标点文字颜色
            formatter: '{b}',
            textStyle: {
              color: "#9eca7f"
            }
          },
          emphasis: {
            show: true,
            color: "#f60", // 目标点鼠标移入的颜色
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });

  let option = {
    title: {
      text: '来京路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          // color: 'rgba(51, 69, 89, .5)', //地图背景色
          // color: '#5a6fc0', //地图背景色
          // borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  };
  myChart.setOption(option);
};
let his = {
  '顺义校区': [116.4551, 40.2539]
};
let lkd = [];
setMap(his, lkd)




axios({
  url: '/student/overview',
  method: 'get',
}).then(({
  data: res
}) => {
  //成功回调
  if (res.code == 0) {
    document.querySelector('.overview .total').innerHTML = res.data.total;
    document.querySelector('.overview .avgSalary').innerHTML = res.data.avgSalary;
    document.querySelector('.overview .avgAge').innerHTML = res.data.avgAge;
    document.querySelector('.overview .proportion').innerHTML = res.data.proportion;
  }
});


let batch = document.querySelector('#batch')
document.querySelector('.btn').onclick = function () {
  if (batch.style.display == 'none') {
    batch.style.display = 'block'
  } else {
    batch.style.display = 'none'
  }
}
let list = document.querySelectorAll('#batch li')
for (let i = 0; i < list.length; i++) {
  list[i].onclick = function () {
    let index = this.getAttribute('data-index')
    axios({
      url: '/score/batch',
      method: 'get',

      params: {
        batch: index
      }
    }).then(({
      data: res
    }) => {
      //成功回调
      if (res.code == 0) {
        setBar(res.data)
      }


    });
  }
}
list[0].click()

axios({
  url: '/student/list',
  method: 'get',

}).then(({
  data: res
}) => {
  //成功回调
  if (res.code == 0) {
    let obj = {
      name: [],
      salary: [],
      truesalary: []
    }
    let arr = []
    let mapdata = {
      '顺义校区': [116.4551, 40.2539]
    };
    let mapdata1 = []
    res.data.forEach(emm => {
      obj.name.push(emm.name)
      obj.salary.push(emm.salary)
      obj.truesalary.push(emm.truesalary)

      let i = arr.findIndex(v => v.name === emm.province)
      if (i >= 0) {
        arr[i].value++;
      } else {
        arr.push({
          value: 1,
          name: emm.province
        });
      }


      mapdata[emm.county] = [emm.jing, emm.wei]
      let c = mapdata1.findIndex(po => po[0].name == emm.county)
      if (c != -1) {
        mapdata1[c][0].value++
      } else {
        mapdata1.push([{
          value: 1,
          name: emm.county
        }])
      }




    })


    setLine(obj)
    setPic(arr)
    setMap(mapdata, mapdata1)

  }

});